<template>
	<view>
		<view class="all">
			<view class="parentTop" style="background:url(../../static/img/05parentmain.png); background-repeat: no-repeat; background-size: cover;">
				<!-- 渲染的头部孩子列表 -->
				<view class="childs">
					<view class="childname" :class="chindex==index?'active':''" @click="dianji(index)">{{studentdata.sname}}</view>
				</view>
				<view class="topbg" style="background: url(../../static/img/parentBack2.e43299b.png);background-size:100%; background-repeat: no-repeat;">

					<view class="childparents" style="background: url(../../static/img/tips.gif);background-repeat: no-repeat ;background-size: cover;">
						{{studentdata.sname}}妈妈
					</view>
				</view>
			</view>

			<view class="parentcontent">
				<view @click="goChooseCourse" class="contchild" style="background: url(../../static/img/parentclass01.png);background-size:100%; background-repeat: no-repeat; box-shadow:0 4rpx 10rpx 0 #f19778 ;">
					<view class="contchildp">
						<text>CHOOSE COURSES</text>
						<text>选课</text>
					</view>
				</view>
				<view @click="goCourseTable" class="contchild" style="background: url(../../static/img/parentclass02.png);background-size:100%; background-repeat: no-repeat; box-shadow:0 4rpx 10rpx 0 #7bbffc ; ">
					<view class="contchildp">
						<text>CLASS SCHENULE</text>
						<text>课程表</text>
					</view>
				</view>
				<view @click="goMyCouurse" class="contchild" style="background: url(../../static/img/parentclass03.png);background-size:100%; background-repeat: no-repeat; box-shadow:0 4rpx 10rpx 0 #41dcf7;">
					<view class="contchildp">
						<text>SELECTED COURSES</text>
						<text>已选课程</text>
					</view>
				</view>
			</view>

			<view class="contTitle">
				<view class="contTitleleft">
					<text>正在学的课程</text>
				</view>
				<view class="contTitleright" @click="goStudiingAll">
					<text class="allicon" style="background: url(../../static/img/parents/showAll.png);background-size: cover; margin-right: 10rpx;"></text>
					<text style="font-size: 22rpx; color: rgb(121,121,121);">showAll</text>
				</view>
			</view>

			<!-- 渲染的课程列表 -->
			<view class="classlist" @click="Studiing" v-for="(item,index) in data" :key="index">
				<view class="listchild">
					<image mode="aspectFit" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1010153378,2826868178&fm=26&gp=0.jpg"></image>
				</view>
				<view class="listchild cont">
					<view class="classname">
						<text>{{item.courseName}}</text>
					</view>
					<view class="classcont">
						<view class="classcontadd">
							<view class="classaddicon" style="background: url(../../static/img/parents/place.png); background-size: cover;"></view>
							<text class="classaddress">活动中心</text>
						</view>
						<view class="classconttime">
							<text class="classaddicon" style="background: url(../../static/img/parents/time.png); background-size: cover;"></text>
							<text>周一下午 16:00-17:00</text>
						</view>
					</view>
				</view>
				<view class="listchild timeclass">
					<view class="classtimes">
						<text class="classtime">学时:</text>
						<text class="classhour">16小时</text>
					</view>

					<text class="classtotal">总人数{{item.num}}人</text>
					<view class="surplus">
						<text class="classsurplus">剩余名额:</text>
						<text class="peoplenum">10人</text>
						<text>结束</text>
					</view>

				</view>
			</view>
			
			<!-- <view class="classlist" @click="Studiing">
				<view class="listchild">
					<image mode="aspectFit" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1404356635,4069407645&fm=26&gp=0.jpg"></image>
				</view>
				<view class="listchild cont">
					<view class="classname">
						<text>春天培训班</text>
					</view>
					<view class="classcont">
						<view class="classcontadd">
							<view class="classaddicon" style="background: url(../../static/img/parents/place.png); background-size: cover;"></view>
							<text class="classaddress">活动中心</text>
						</view>
						<view class="classconttime">
							<text class="classaddicon" style="background: url(../../static/img/parents/time.png); background-size: cover;"></text>
							<text>周一下午 16:00-17:00</text>
						</view>
					</view>
				</view>
				<view class="listchild timeclass">
					<view class="classtimes">
						<text class="classtime">学时:</text>
						<text class="classhour">16小时</text>
					</view>

					<text class="classtotal">总人数50人</text>
					<view class="surplus">
						<text class="classsurplus">剩余名额:</text>
						<text class="peoplenum">10人</text>
						<text>结束</text>
					</view>

				</view>
			</view>
 -->

			<!-- 底部个人中心 -->
			<view class="post" @click="goMyCenter"></view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				childname: ['杨大妮', '杨二妮', '杨三妮'],
				chindex: -1,
				studentid:'',
				studentdata:{},
				data:{},
			}
		},
		methods: {
			//点击导航栏孩子名字渲染不同的页面
			dianji(index) {
				this.chindex = index;
			},
			// 去-选课列表页
			goChooseCourse() {
				uni.navigateTo({
					url: './coursePage/chooseCourse'
				})
			},
			// 去-我的课程表页
			goCourseTable() {
				uni.navigateTo({
					url: 'coursePage/CourseTab'
				})
			},
			// 去-已选课程页
			goMyCouurse() {
				uni.navigateTo({
					url: 'coursePage/myCourse'
				})
			},
			// 列表-正在学的课程-点击的详情页
			Studiing() {
				uni.navigateTo({
					url: 'coursePage/CourseTab'
				})
			},
			// 列表-正在学的课程-showAll
			goStudiingAll() {
				uni.navigateTo({
					url: 'coursePage/allStudyCourses'
				})
			},
			// 去个人中心
			goMyCenter() {
				uni.navigateTo({
					url: 'myCenter/myCenter'
				})
			},

		},
		mounted() {
			//取出学生的信息
			this.studentdata= uni.getStorageSync('parentData');
			//取出学生学号
			this.studentid=uni.getStorageSync('muxuehao');
			//把学生ID存储到本地中
			uni.setStorageSync('studentId', this.studentid);
			uni.setStorageSync('studentid', '10004');
			//根据学生id查看学生正在学的课程
			uni.request({
				url:'http://172.16.14.10:8084/student/findCourseStudying',
				data:{
					studentCode:this.studentid
				},
				success:(res)=>{
					this.data=res.data.data;
				}
			})
		}

	}
</script>

<style>
	.all {
		width: 750rpx;
		height: 1300rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		background-color: #fafafa;
	}

	.parentTop {
		flex: 1;
		width: 750rpx;
		height: 500rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}

	.childs {
		width: 700rpx;
		height: 70rpx;

		margin-top: 60rpx;

	}

	.childname {
		width: 172rpx;
		height: 70rpx;
		color: rgb(255, 255, 255);
		float: left;
		border-radius: 35rpx;
		border: none;
		background-color: #46f1de;
		text-align: center;
		line-height: 70rpx;
		margin-right: 20rpx;
	}

	.active {
		border-radius: 35rpx;
		background-color: rgba(255, 255, 255, 0.4);
		color: rgb(0, 175, 155);
	}

	.topbg {
		margin-top: 30rpx;
		width: 700rpx;
		height: 366rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.childparents {
		margin-top: 20rpx;
		width: 300rpx;
		height: 68rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		padding-left: 10rpx;
	}

	.parentcontent {
		flex: 1;
		width: 700rpx;
		height: 220rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.contchild {
		width: 220rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
	}

	.contchildp {
		width: 120rpx;
		height: 80rpx;
		margin-left: 20rpx;
		font-size: 14rpx;
		color: rgba(255, 255, 255, 0.86);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.contchildp:last-child {
		font-size: 22rpx;
		font-weight: 300;
	}

	.contTitle {
		width: 700rpx;
		height: 60rpx;
		/* background-color: #3F536E; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contTitleleft {
		font-size: 32rpx;
		font-weight: 500;
	}

	.contTitleright {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.allicon {
		width: 20rpx;
		height: 20rpx;
	}

	/* 正在学的课程list */
	.classlist {
		width: 700rpx;
		height: 220rpx;
		background-color: #FFFFFF;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

	}

	.listchild {
		width: 200rpx;
		height: 140rpx;

	}

	.listchild image {
		width: 200rpx;
		height: 140rpx;
	}

	.cont {
		width: 250rpx;

		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		flex-direction: column;
		justify-content: space-between;

	}

	.classname {
		flex: 1;
		width: 250rpx;
		/* height:40rpx; */
		font-size: 32rpx;
		font-weight: 500;

	}

	.classcont {
		flex: 1;
		/* height: 80rpx; */
		width: 250rpx;
		font-size: 22rpx;
		color: rgb(179, 179, 179);


	}

	.classaddicon {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.classcontadd {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.classtotal {
		font-size: 29rpx;
		color: rgb(255, 108, 44);
		display: block;
		margin-top: 16rpx;

	}

	/* 盒子右边 */
	.timeclass {
		height: 140rpx;
		text-align: right;
	}

	.classconttime {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 6rpx;
	}

	.classtimes {

		text-align: right;
		color: #ababab;
	}

	.classtime {
		border-bottom: 1px solid #ababab;
		font-size: 26rpx;
	}

	.classhour {
		border-bottom: 1px solid #ababab;
		font-size: 22rpx;
	}

	.classtotal {
		width: 200rpx;
	}

	.surplus {
		width: 200rpx;
		display: flex;
		justify-content: flex-start;
		font-size: 22rpx;
		color: rgb(179, 179, 179);
		margin-top: 12rpx;
	}

	.peoplenum {
		color: rgb(255, 108, 44);
	}

	/* 底部小圆球 */
	.post {
		background-color: #ffffff;
		position: fixed;
		bottom: 10px;
		right: 10px;
		border: none;
		border-radius: 300px;
		box-shadow: 4px 1px 1px #cccccc;
		width: 30px;
		height: 30px;
		border-radius: 50rpx;
		background: url(../../static/img/register/1head.png);
		background-size: cover;
	}
</style>
